<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师管理</title>
</head>
<body style="height: 100%">
<div id="app" style="display: flex; justify-content: center; align-items: center; height: 530px">
    <el-form ref="teacherForm" :rules="rules" :model="teacherForm" label-width="80px" style="width: 30%">
        <el-form-item label="学工号" prop="id">
            <el-input v-model="teacherForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="教师名" prop="teacherName">
            <el-input v-model="teacherForm.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input type="password"  v-model="teacherForm.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
            <el-input type="password" v-model="teacherForm.confirmPwd"></el-input>
        </el-form-item>
        <el-form-item label="备注">
            <el-input type="textarea" v-model="teacherForm.remark"></el-input>
        </el-form-item>

        <el-form-item>
            <div align="center">
                <el-button type="primary" @click="updateTeacher('teacherForm')">提交</el-button>
                <el-button @click="updateFormVisible=false">取消</el-button>
            </div>
        </el-form-item>
    </el-form>

</div>


<!--导入资源-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>


<script>
    //创建vue核心对象
    new Vue({
        el: "#app",
        mounted() {
            this.checkLogin();
        },
        methods: {

            //获取登录态
            checkLogin(){
                //获取登录状态
                axios({
                    method:"post",
                    url:"http://localhost:8080/teacher/checkLogin",
                }).then(resp=>{
                    this.teacherForm =resp.data;

                })
            },

            //提交修改表单
            updateTeacher(formName) {
                //表单校验
                this.$refs[formName].validate((valid) => {
                    if (! valid) {
                        //验证未通过
                        console.log('error submit!!');
                        return false;
                    } else {
                        var _this = this;
                        //ID是否修改
                        var flag = null;
                        axios({
                            method: "post",
                            url: "http://localhost:8080/teacher/update?flag=" + flag,
                            data: _this.teacherForm
                        }).then(function (resp) {
                            if (resp.data == "success") {
                                //关闭弹窗
                                _this.updateFormVisible = false;
                                //弹出提示信息
                                _this.$message({
                                    message: '修改成功',
                                    type: 'success',
                                    center: true
                                });
                            } else {
                                //关闭弹窗
                                _this.updateFormVisible = false;
                                //弹出提示信息
                                _this.$message({
                                    message: '修改失败！',
                                    type: 'error',
                                    center: true
                                });
                            }
                        })
                    }
                });

            },


        },


        //数据
        data() {
            let reg = /^[0-9A-Za-z]{6,16}$/
            var validateNewPwd = (rule, value, callback) => {
                if (value === ""){
                    callback();
                } else if (!reg.test(value)) {
                    callback(new Error('密码应是6-12位数字或字母！'))
                } else if (this.teacherForm.password === value) {
                    callback(new Error('新密码与旧密码不可一致！'))
                } else {
                    callback()
                }
            }

            var validateComfirmPwd = (rule, value, callback) => {
                if (this.teacherForm.newPassword === ""){
                    callback();
                }else if(value === ""){
                    callback(new Error('请确认密码！'))
                } else if (!reg.test(value)) {
                    callback(new Error('密码应是6-12位数字或字母！'))
                } else if (this.teacherForm.newPassword !== value) {
                    callback(new Error('确认密码与新密码不一致！'))
                } else {
                    callback()
                }
            }


            return {
                //添加表单
                teacherForm: {
                    id: '',
                    teacherName: '',
                    remark: '',
                    password: '123123123',
                    newPassword: "",
                    confirmPwd: "",
                },



                rules: {
                    teacherName:[
                        {required: true, message: '请输入教师名', trigger: 'blur'}
                    ],
                    newPassword: [
                        // {required: true, message: '请输入新密码', trigger: 'blur'},
                        {validator: validateNewPwd, trigger: 'blur'}
                    ],
                    confirmPwd: [
                        // {required: true, message: '请确认密码', trigger: 'blur'},
                        {validator: validateComfirmPwd, trigger: 'blur'}
                    ]
                }
            }
        }
    })

</script>


</body>
</html>